﻿/*
Powered by uimix.com;
date:2013-09-11;
*/

/* common */
.all-pro-list .pages a{background:url(../Images/vivo-products-ico.jpg) no-repeat;}

/* a-contain */
.vivo-all-products .vivo-menu-series{position: static; top:0; display: block; border-top: 0;}

#vivo-contain .vivo-all-products{width: 100%; height: auto; overflow: hidden; position: relative; background: #fafafa;}
.vivo-all-products .promos-products{width: 1100px; margin: auto;}
.promos-products h2{height: 80px; line-height: 80px; display: block; text-align: center; position: relative;}
.promos-products h2 strong{font-size: 18px; color: #333; background:#fafafa; display: inline-block; padding: 0 10px; font-weight: normal; position: relative;}
.promos-products h2 i{height: 1px; overflow: hidden; width: 100%; position: absolute; top: 50%; left: 0; background: #dcdcdc;}
.vivo-all-products .promos-list{height: 665px; overflow: hidden; position: relative; border: 1px #eee solid; background: #fff;}
.promos-list ul li{position: absolute; display: block; overflow: hidden;}
.promos-list ul li .color-list{padding: 15px 20px 0 30px; text-align: left;}
.promos-list ul li .color-list span{width: 8px; height: 8px; display: inline-block; overflow: hidden; margin-right: 5px; border: 1px #cfcfcf solid; background: #fff; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; border-radius:50%; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.promos-list ul li .color-list span.white{border: 1px #cfcfcf solid; background: #fff;}
.promos-list ul li .color-list span.blue{border: 1px #5263a1 solid; background: #5263a1;}
.promos-list ul li .color-list span.black{border: 1px #666 solid; background: #666;}
.promos-list ul li a{display: block; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; transition:all .3s ease-in-out; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
.promos-list ul li .figure img{-webkit-transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; transition:all 1s; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
.promos-list ul li a:hover .scale img{-webkit-transition:all 2s; -moz-transition:all 2s; -ms-transition:all 2s; transition:all 2s; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);}
.promos-list ul li a:hover .movetop img{-webkit-transition:all 2s; -moz-transition:all 2s; -o-transition:all 2s; transition:all 2s; -webkit-transform: translate3d(0,-40px,0); -moz-transform: translate3d(0,-40px,0); -o-transform: translate3d(0,-40px,0); transform: translate3d(0,-40px,0);}
.promos-list ul li a:hover .move img{-webkit-transition:all 2s; -moz-transition:all 2s; -ms-transition:all 2s; transition:all 2s; -webkit-transform: translate3d(-10%,0px,0px); -moz-transform: translate3d(-10%,0px,0px); -ms-transform: translate3d(-10%,0px,0px); transform: translate3d(-10%,0px,0px);}
.promos-list ul li a:hover .moveup img{-webkit-transition:all 2s; -moz-transition:all 2s; -o-transition:all 2s; transition:all 2s; -webkit-transform: translate3d(0,-10%,0); -moz-transform: translate3d(0,-10%,0); -o-transform: translate3d(0,-10%,0); transform: translate3d(0,-10%,0);}





.promos-list ul li.promos-bt{width: 714px; height: 332px; top: 0; left: 0; background: #47afe6;}
.promos-list ul li.promos-bt a{height: 332px; position: relative; display: block;}
.promos-list ul li.promos-bt .figure{width: 714px; height: 332px; position: absolute; top: 0; left: 0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
.promos-list ul li.promos-bt .figure .f1{position: absolute; left: -20px; bottom: -20px;}
.promos-list ul li.promos-bt .figure .f2{position: absolute; left: 220px; top: 20px;}
.promos-list ul li.promos-bt a h2{width: 230px; height: 30px; position: absolute; right: 50px; top: 150px;}
/* ant */
.promos-list ul li.promos-bt a:hover .figure{-webkit-transform: translate3d(0,-20px,0); -moz-transform: translate3d(0,-20px,0); -ms-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0); -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; }


.promos-list ul li.promos-br a h3{display: block; text-align: center; width: 100%; position: absolute; top: 50px; z-index: 9;}
.promos-list ul li.promos-br{width: 383px; height: 665px; top: 0; right: 0; border-left: 1px #eee solid;}
.promos-list ul li.promos-br .figure img{width: 383px; height: 765px; z-index: 1;}

.promos-list ul li.promos-lbs{width: 357px; height: 332px; top: 333px; left: 0; border-right: 1px #eee solid; background: #ff97b7; color: #fff;}
.promos-list ul li.promos-lbs a{display: block; color: #fff; position: relative; height: 332px;}
.promos-list ul li.promos-lbs .figure{width: 260px; height: 302px; position: absolute; bottom: 0; right: 20px; z-index: 1;}
.promos-list ul li.promos-lbs a h3{position: absolute; left: 20px; bottom: 20px; z-index: 2; display: block; font-size: 24px; padding: 0;}
.promos-list ul li.promos-lbs a h3 p{padding: 0; font-size: 14px;}

.promos-list ul li.promos-rbs{width: 356px; height: 332px; top: 333px; left: 358px; background: #ffd25a; color: #fff;}
.promos-list ul li.promos-rbs a{color: #fff; height: 332px; position: relative; display: block;}
.promos-list ul li.promos-rbs .figure{width: 700px; height: 332px; position: absolute; top: 0; left: 0; z-index: 1;  -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transform: translate3d(4%,0,0); -moz-transform: translate3d(4%,0,0); transform: translate3d(4%,0,0);}
.promos-list ul li.promos-rbs a h3{position: absolute; left: 20px; bottom: 20px; z-index: 2; display: block; font-size: 24px; padding: 0;}
.promos-list ul li.promos-rbs a h3 p{padding: 0; font-size: 14px;}
/* ant */
.promos-list ul li.promos-rbs a:hover .figure{-webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0)); -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}






.vivo-all-products .all-pro-list{width: 1100px; margin: auto; padding-top: 20px; padding-bottom: 50px;}
.all-pro-list h2{height: 80px; line-height: 80px; display: block; text-align: center; position: relative;}
.all-pro-list h2 strong{font-size: 18px; color: #333; background:#fafafa; display: inline-block; padding: 0 10px; font-weight: normal; position: relative;}
.all-pro-list h2 i{height: 1px; overflow: hidden; width: 100%; position: absolute; top: 50%; left: 0; background: #dcdcdc;}
.all-pro-list .all-list{overflow: hidden; position: relative; border: 1px #eee solid; background: #fff; margin-top: 10px;}
.all-list ul li{float: left; width: 274px; height: 350px; overflow: hidden; border-right: 1px #eee solid; border-bottom: 1px #eee solid; text-align: center; position: relative;}
.all-list ul li.cright{border-right: none; width: 273px;}
.all-list ul li.cbot{border-bottom: none;}
.all-list ul li a{-webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; transition:all .3s ease-in-out; display: block; padding-top: 20px;}
.all-list ul li a i{-webkit-transition:all .2s; -moz-transition:all .2s; -ms-transition:all .2s; transition:all .2s; display: block; overflow: hidden; width: 100%; height: 350px; position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 9; border:1px #fff solid; *display: none;}
.all-list ul li a:hover i{border:5px #f2f9fd solid; -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; transition:all .5s;}
.all-list ul li a .figure{height: 248px; overflow: hidden; position: relative; text-align: center;}
.all-list ul li a .figure img{width: 248px; height: 248px; z-index: 1; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; transition:all 1s ease-in-out;}
.all-list ul li a:hover .scale img{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);}
.all-list ul li a h3{font-size: 18px; color: #333; padding: 5px 30px; text-align: center;}
.all-list ul li a p{padding: 0 30px; font-size: 14px; text-align: center;}
.all-list ul li .color-list{padding: 15px 20px 0 30px; text-align: left;}
.all-list ul li .color-list span{width: 8px; height: 8px; display: inline-block; overflow: hidden; margin-right: 5px; border: 1px #cfcfcf solid; background: #fff; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; border-radius:50%; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
.all-list ul li .color-list span.white{border: 1px #cfcfcf solid; background: #fff;}
.all-list ul li .color-list span.blue{border: 1px #5263a1 solid; background: #5263a1;}
.all-list ul li .color-list span.black{border: 1px #666 solid; background: #666;}
.all-pro-list .pages{height: 80px; position: relative; text-align: right;}
.all-pro-list .pages strong{font-size: 18px; color: #666; display: inline-block; padding: 0 20px; font-weight: normal; position: relative; top: 16px;}
.all-pro-list .pages a{width: 31px; height: 31px; overflow: hidden; display:inline-block; position: relative; top: 25px;}
.all-pro-list .pages a.prev{background-position: 0 0;}
.all-pro-list .pages a.prev:hover{background-position: 0 -32px;}
.all-pro-list .pages a.next{background-position: -32px 0;}
.all-pro-list .pages a.next:hover{background-position: -32px -32px;}

.series h2{text-align: left; height: 60px; line-height: 60px;}
.series h2 strong{padding: 0; padding-top: 10px;}
/* z-contain */
























